<template>
  <div class="login-container">
    <div class="login-box" v-if="loginMode === 1">
      <!-- 登录表单区 -->
      <van-form @submit="onSubmit" class="login-form" ref="loginFormRef">
        <van-field v-model="phonenum" name="手机号码" placeholder="请输入手机号码" :rules="loginNumRules" />
        <van-field v-model="verificationCode" center clearable name="验证码" placeholder="请输入收到的验证码"
          :rules="loginModeRules">
          <template #button>
            <van-button size="small" type="primary" native-type="button" @click="sendCode()" :showCode="showCode"
              v-if="showCode">发送验证码</van-button>
            <van-button size="small" type="primary" native-type="button" v-else>
              <van-count-down :time="time" format="ss s" />
            </van-button>
          </template>
        </van-field>
        <div style="margin: 16px;">
          <van-button round block type="info" native-type="submit" color="#00DDAA" @click="login">登录</van-button>
          <div class="quick-btn">
            <a @click="switchMode(2)"><span class="login-method1">账号密码登录</span></a>
            <a @click="toRegister"><span class="login-method2">快速注册</span></a>
          </div>
          <div class="footer">
            <div class="otherLogin">
              <h4>其他登录方式</h4>
            </div>
            <div class="otherLoginItem">
              <a href=""><img src="../img/QQ.png" alt=""></a>
              <a href=""><img src="../img/weixin.png" alt=""></a>
              <a href=""><img src="../img/apple.png" alt=""></a>
            </div>
            <div class="foot-text">
              <span text-align="center">登录代表您已同意<a href="">隐私政策</a></span>
            </div>
          </div>
        </div>
      </van-form>
    </div>
    <div class="login-box" v-if="loginMode === 2">
      <!-- 登录表单区 -->
      <van-form @submit="onSubmit" class="login-form">
        <van-field v-model="username" name="username" placeholder="用户名/手机号" :rules="loginUserIDRules" />
        <van-field v-model="password" type="password" center clearable name="password" placeholder="请输入密码"
          :rules="loginPassWordRules" />
        <div style="margin: 16px;">
          <van-button round block type="info" native-type="submit" color="#00DDAA">登录</van-button>
          <!-- <van-button round block type="info" native-type="submit" class="btn-02">一键登录</van-button> -->
          <div class="quick-btn">
            <a @click="switchMode(1)"><span class="login-method1">短信验证码登录</span></a>
            <a @click="toRegister"><span class="login-method2">手机快速注册</span></a>
          </div>
          <div class="footer">
            <div class="otherLogin">
              <h4>其他登录方式</h4>
            </div>
            <div class="otherLoginItem">
              <a href=""><img src="../img/QQ.png" alt=""></a>
              <a href=""><img src="../img/weixin.png" alt=""></a>
              <a href=""><img src="../img/apple.png" alt=""></a>
            </div>
            <div class="foot-text">
              <span text-align="center">登录代表您已同意<a href="">隐私政策</a></span>
            </div>
          </div>
        </div>
      </van-form>
    </div>
  </div>
</template>

<script>
  import {
    mapState,
    mapMutations
  } from 'vuex'
  export default {
    data() {
      return {
        // 密码显示模式
        passwordMode: true,
        // 登录校验规则
        loginPassWordRules: [{
          required: true,
          message: '请填写密码'
        }],
        loginUserIDRules: [{
          required: true,
          message: '请填写手机号码'
        }],
        // 登录方式
        loginMode: 1,
        // 显示倒计时按钮 or 发送验证码按钮
        showCode: true,
        // 发送验证码倒计时时间
        time: 120 * 1000,
        // 登录表单的数据绑定对象
        phonenum: '',
        verificationCode: '',
        username: '',
        password: '',
        // 表单的验证规则对象
        // 验证手机号码是否合法
        loginNumRules: [{
            required: true,
            message: '请填写手机号码'
          },
          {
            pattern: /\d{11}/,
            message: '手机号码长度不正确'
          }
        ],
        // 验证验证码是否正确
        loginModeRules: [{
          required: true,
          message: '请填写验证码'
        }]
      }
    },
    methods: {
      ...mapMutations(['SET_LOGIN_TOKEN']),
      // 切换登录方式
      switchMode(val) {
        this.loginMode = val
      },
      // 发送验证码
      sendCode() {
        this.showCode = false
      },
      // 提交
      async onSubmit(values) {
        // console.log('submit', values)
        // 将values转为json格式
        var item = {}
        item.username = values.username
        item.password = values.password
        var json = JSON.stringify(item)
        // 向后台请求token
        await this.$api.homeData.getToken(json).then(res => {
          console.log('res2222:', res)
          if (res.code === 200) {
            this.SET_LOGIN_TOKEN(res.data)
            console.log('1234:', this.loginToken)
            this.$router.push({
              name: 'Home'
            })
          } else {
            this.$toast(res.data)
          }
        })
      },
      login() {
        this.$refs.loginFormRef.validate((手机号码) => {
          console.log(手机号码)
        })
      },
      // 注册
      toRegister() {
        this.$router.push({
          name: 'Register'
        })
      }
    },
    computed: {
      ...mapState(['loginToken'])
    }
  }
</script>

<style scoped>
  .login-container {
    background-color: white;
    height: 100%;
  }

  .login-box {
    width: 400px;
    height: 300px;
    background-color: white;
    border-radius: 10px;
    position: absolute;
    left: 50%;
    top: 20%;
    transform: translate(-50%, -50%);
  }

  .login-form {
    position: absolute;
    bottom: 0;
    width: 100%;
    padding: 0 20px;
    box-sizing: border-box;
    top: 50px;
  }

  .btn-02 {
    background-color: #FFFFFF;
    color: red;
    margin-top: 10px;
  }

  .quick-btn {
    color: rgba(0, 0, 0, .6);
    font-size: 10px;
    margin-top: 6px;
    overflow: hidden;
  }

  .quick-btn .login-method1 {
    float: left;
  }

  .quick-btn .login-method2 {
    float: right;
  }

  .footer {
    margin-top: 9.375rem;
    /* border-top: 1px solid rgba(0, 0, 0, .1); */
    font-size: .12rem;
  }

  .otherLogin {
    color: rgba(0, 0, 0, .2);
    width: 90px;
    padding: 0 20px 0;
    margin: 20px auto;
    line-height: 1px;
    border-left: 100px solid #ddd;
    border-right: 100px solid #ddd;
    text-align: center;
  }

  .otherLoginItem {
    padding: 15px 43px;
  }

  .otherLoginItem img {
    display: inline-block;
    color: rgba(0, 0, 0, .4);
    margin: 12px;
    background-size: 100% auto;
    padding-top: 5px;
    background-repeat: no-repeat;
  }

  .foot-text {
    color: rgba(0, 0, 0, .4);
    font-size: 10px;
    margin-top: 6px;
    overflow: hidden;
    text-align: center;
  }
</style>
